<template>
  <el-dialog
    center
    v-dialogDrag
    title="账号信息"
    v-if="detailDialog"
    v-loading="loading"
    :width="dialogWidth"
    :before-close="close"
    :visible.sync="detailDialog"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-position="right"
      class="mt20 overflow pl15 pr15"
    >
      <el-row type="flex" justify="space-around">
        <el-col :span="18" class="form-inp">
          <el-row type="flex" justify="space-around">
            <el-col :span="18" class="form-inp">
              <el-form-item
                label="我的账号："
                prop="userName"
                :label-width="labelWidth"
              >
                <span>{{ form.userName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-around">
            <el-col :span="18" class="form-inp">
              <el-form-item
                label="姓名："
                prop="realName"
                :label-width="labelWidth"
              >
                <span>{{ form.realName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-around">
            <el-col :span="18" class="form-inp">
              <el-form-item label="性别：" prop="sex" :label-width="labelWidth">
                <span>{{ form.sex }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-around">
            <el-col :span="18" class="form-inp">
              <el-form-item
                label="手机号码："
                prop="phone"
                :label-width="labelWidth"
              >
                <span>{{ form.phone ? form.phone : "--" }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="form-inp">
          <el-form-item>
            <el-tooltip
              effect="dark"
              content="点击图片修改头像"
              placement="top"
            >
              <el-upload
                action
                :limit="1"
                ref="upload"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="uploadVerification"
                class="inline-block img-upload"
              >
                <img
                  v-if="avatarUrl"
                  :src="avatarUrl"
                  class="fr mt10 round"
                  style="width: 140px; height: 140px"
                />
                <img
                  v-else
                  src="@/assets/avatar.jpg"
                  class="fr mt10 round"
                  style="width: 140px; height: 140px"
                />
              </el-upload>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer align-center tiling inline-block">
      <el-button @click="handleModifyPhone">修改手机号</el-button>
      <el-button class="theme-btn" @click="handleModifyPassword"
        >修改密码</el-button
      >
      <el-button class="theme-btn" @click="handleLogout">退出账号</el-button>
    </span>
    <PhotoDialog
      @showPic="handleShowPic"
      :showPic="showPic"
      :isShowPic="isShowPic"
    ></PhotoDialog>
  </el-dialog>
</template>

<script>
import "@/utils/drag.js";
import { mapGetters } from "vuex";
import PhotoDialog from "@/components/photo_dialog";
import { getAllDictionary } from "@/apis/dictionary";
import { setHeadPortrait, getLoginUserInfo } from "@/apis/user";
import { imageFormatIsCorrect } from "@/utils/image_verification.js";

export default {
  name: "Account_info_dialog",
  data() {
    return {
      form: {},
      showPic: "",
      avatarUrl: "",
      isShowPic: false,
      imageMaxSize: 1024,
      labelWidth: "110px",
      dialogWidth: "640px",
      rules: {}
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  watch: {
    detailDialog() {
      this.form = this.userInfo;
      this.$store.dispatch("load/setLoading", false);
      this.avatarUrl = this.userInfo.head;
    }
  },
  methods: {
    uploadVerification(file, fileList) {
      if (imageFormatIsCorrect(file, this.imageMaxSize)) {
        this.avatarUrl = URL.createObjectURL(file.raw);

        const formData = new FormData();

        formData.append("file", file.raw);
        formData.append("id", sessionStorage.getItem("userId"));

        // setHeadPortrait(formData).then(async _ => {
        //   this.$store.dispatch(
        //     "user/getLoginUserInfo",
        //     sessionStorage.getItem("userId")
        //   );
        // });
      }
    },
    handleShowPic(data) {
      this.showPic = data;
      this.isShowPic = !this.isShowPic;
    },
    handleLogout() {
      this.$router.push("/login");
      this.$store.dispatch("permission/logout");
    },
    handleModifyPassword() {
      this.$emit("modifyPassword");
    },
    handleModifyPhone() {
      this.$emit("modifyPhone");
    },
    close() {
      this.$emit("close");
      this.resetForm();
    },
    resetForm() {
      this.form = {};
    }
  },
  components: {
    PhotoDialog
  },
  props: ["detailDialog", "loading"]
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
